<template>
    <view class="container">
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
            <view class="left">
				<view class="nickname" v-if="Object.getOwnPropertyNames(business).length > 0">{{business.nickname}}</view>
                <!-- 微信小程序开发能力标签 获取微信昵称 -->
                <open-data v-else type="userNickName" class="nickname"></open-data>
            </view>
            <view class="right">
                <view class="avatar xcx">
                    <!-- 没有登录的时候，默认用微信的开发信息 -->
					<uv-avatar shape="square" mode="scaleToFill" size="100%" :src="business.avatar_cdn" v-if="Object.getOwnPropertyNames(business).length > 0"></uv-avatar>

                    <open-data v-else type="userAvatarUrl"></open-data>
                </view>
            </view>
            <!-- #endif -->

            <!-- H5和app -->
            <!-- #ifdef APP-PLUS || H5 -->
            <view class="left">
                <view class="nickname" v-if="business.nickname">{{business.nickname}}</view>
                <view class="nickname" v-else>请先登录</view>
            </view>
            <view class="right">
                <view class="avatar">
                    <uv-avatar :src="business.avatar_cdn" size="90" v-if="business.avatar_cdn"></uv-avatar>
                    <uv-avatar v-else src="/static/avatar.jpg" size="90"></uv-avatar>
                </view>
            </view>
            <!-- #endif -->
        </view>

        <!-- 菜单 对象不为空就说明有登录-->
        <view class="menu" v-if="Object.getOwnPropertyNames(business).length > 0">
            <view class="item" hover-class="checkActive" @click="ToProduct">
				<view class="title">产品防伪管理</view>
				<uv-icon name="arrow-right"></uv-icon>
			</view>

			<!--  #ifdef MP-WEIXIN -->
			<view class="item" hover-class="checkActive" @click="UnbindRef.open()">
				<view class="title">解除绑定账号</view>
				<uv-icon name="arrow-right"></uv-icon>
			</view>
			<!-- #endif -->

            <view class="item" hover-class="checkActive" @click="LogoutRef.open()">
                <view class="title">退出账号</view>
                <uv-icon name="arrow-right"></uv-icon>
            </view>
        </view>


        <!-- 登录按钮 -->
        <view class="actions" v-if="Object.getOwnPropertyNames(business).length <= 0">
            <!-- #ifdef MP-WEIXIN -->
            <view class="login">
                <uv-button color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" iconColor="#fff" iconSize="25" icon="weixin-circle-fill" @click="OnLogin">微信一键登陆</uv-button>
            </view>
            <!-- #endif -->

            <!--  #ifdef H5 || APP-PLUS-->
            <view class="login">
				<uv-button type="primary" @click="ToLogin">登陆帐号</uv-button>
            </view>
            <!-- #endif -->
        </view>
    </view>

    <!-- 确认对话框 -->
    <uv-modal ref="LogoutRef" title="退出账号" content="是否确认退出当前账号？" :showCancelButton="true" @confirm="OnLogout" @cancel="LogoutRef.close()"></uv-modal>

	<!-- 解除绑定账号 -->
	<uv-modal ref="UnbindRef" title="解除绑定" content="是否确认解除账号绑定？" :showCancelButton="true" @confirm="OnConfirmUnbind" @cancel="UnbindRef.close()"></uv-modal>

	<!-- 消息提示 -->
	<uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
const { proxy } = getCurrentInstance();

const business = proxy.$business;

const LogoutRef = ref(null);
const UnbindRef = ref(null);
const NoticeRef = ref(null);

const ToLogin = () =>
{
    uni.$uv.route({
        type:'redirectTo',
        url:'/pages/business/login'
    });
}

const OnLogout = () =>
{
    NoticeRef.value.show({
        type:'success',
        message:'退出当前账号成功',
        complete:() =>
        {
            // 清空本地缓存
            uni.removeStorageSync('business');

            // business响应式数据也清空
            business.value = {};
        }
    })
}

const OnConfirmUnbind = async () =>
{
    const params = {
        busid:business.value.id
    }

    const result = await uni.$uv.http.post('/business/unbind',params);

    if(result.code === 1)
    {
        NoticeRef.value.show({
            type:'success',
            message:result.msg,
            complete:() =>
            {
                // 删除登录信息
                uni.removeStorageSync('business',result.data);

                business.value = {};
            }
        })
    }else{
        NoticeRef.value.show({
            type:'error',
            message:result.msg
        });
    }

}

const OnLogin = () =>
{
    uni.login({
        // 登录服务供应商 微信
        provider: 'weixin',
        scopes:'auth_user',
        success: async function (res) {
            // 获取临时登录凭证
            let code = res.code ? res.code : '';

            if(!code)
            {
                NoticeRef.value.show({
                    type:'error',
                    message:'获取临时登录凭证失败'
                })

                return false;
            }

            // 发起请求去自己服务器
            const result = await uni.$uv.http.post('/business/wxlogin',{code});

            if(result.code === 1)
            {
                NoticeRef.value.show({
                    type:'success',
                    message:result.msg,
                    complete:() =>
                    {
                        // 存储登录信息
                        uni.setStorageSync('business',result.data);

                        business.value = result.data;
                    }
                })
            }else{
                NoticeRef.value.show({
                    type:'error',
                    message:result.msg,
                    complete:() =>
                    {
                        const openid = result.data ? result.data.openid : '';

                        if(openid)
                        {
                            uni.$uv.route('/pages/business/bind',{openid});
                        }
                    }
                });
            }
        }
    });
}
const ToProduct = () => uni.$uv.route('/pages/business/list');


</script>

<style>
page {
    background-color: #f5f7fa;
}

.container {
    width: 95%;
    margin: 0 auto;
    padding: 20rpx 0;
}

.user {
    display: flex;
    padding: 40px;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    margin-top: 10px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* #ifdef H5  */
.user {
    align-items: center;
}
/* #endif */

.user .left {
    flex: 3;
}

/* 条件编译 */
/* #ifdef MP-WEIXIN  */
.user .left {
    flex: 3;
    display: flex;
    align-items: center;
    align-content: center;
}
/* #endif */

.user .right {
    flex: 1;
}

.user .right .xcx {
    width: 200rpx;
    height: 200rpx;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user .nickname {
    font-size: 36rpx;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10rpx;
}

.menu {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.menu .item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    border-bottom: 1px solid #f0f2f5;
    transition: all 0.3s ease;
}

.menu .item:last-child {
    border-bottom: none;
}

.menu .item .title {
    font-size: 28rpx;
    color: #2c3e50;
}

.menu .item .uv-icon {
    color: #a0aec0;
}

.checkActive {
    background-color: #f8f9ff;
}

.actions {
    margin-top: 40rpx;
    padding: 0 20rpx;
}

.login {
    margin-bottom: 20rpx;
}

/* 自定义按钮样式 */
.uv-button {
    border-radius: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}

/* 自定义模态框样式 */
:deep(.uv-modal__content) {
    padding: 30rpx !important;
}

:deep(.uv-modal__title) {
    font-size: 32rpx !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
}

:deep(.uv-modal__content__text) {
    font-size: 28rpx !important;
    color: #4a5568 !important;
}
</style>